<template>
  <div class="main-layout">
    <!-- 顶栏导航 -->
    <header class="main-header">
      <div class="header-left" @click="goHome">
        <img :src="logoImg" class="logo" alt="logo" />
        <span class="brand-name">任务中心管理系统</span>
      </div>
      <div class="header-center">
        <el-input
          v-model="search"
          prefix-icon="el-icon-search"
          placeholder="搜索任务/用户/操作..."
          class="global-search"
        />
      </div>
      <div class="header-right">
        <el-badge :value="3" class="icon-btn">
          <el-button type="default" icon="el-icon-bell" circle />
        </el-badge>
        <el-tooltip content="帮助中心"><el-button type="default" icon="el-icon-question-filled" circle /></el-tooltip>
        <el-dropdown>
          <span class="user-avatar">
            <img :src="avatarImg" class="avatar" />
            <span>管理员</span>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人资料</el-dropdown-item>
              <el-dropdown-item>系统设置</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <div class="main-body">
      <!-- 侧边栏菜单 -->
      <el-menu
        :default-active="activeMenu"
        class="side-menu"
        background-color="#0F172A"
        text-color="#fff"
        active-text-color="#165DFF"
        :collapse="isCollapse"
        unique-opened
        @select="handleMenuSelect"
      >
        <el-sub-menu index="task">
          <template #title>
            <el-icon><List /></el-icon>
            <span>任务管理</span>
          </template>
          <el-menu-item index="task-list">任务列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="user">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="user-list">用户列表</el-menu-item>
          <el-menu-item index="role-permission">角色权限</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="sms-template-list">短信模板列表</el-menu-item>
        </el-sub-menu>
      </el-menu>

      <!-- 主内容区 -->
      <main class="main-content">
        <div v-if="activeMenu === '' && router.currentRoute.value.path === '/home'" class="welcome-center">
          <h2>欢迎来到用户增长引擎中心</h2>
        </div>
        <TaskList v-else-if="activeMenu === 'task-list'" />
        <SmsTemplateList v-else-if="activeMenu === 'sms-template-list'" />
        <slot v-else />
      </main>
    </div>

    <!-- 底栏信息 -->
    <footer class="main-footer">
      <div class="footer-left">
        用户：管理员（ID: 10001） | IP: 192.168.1.100
      </div>
      <div class="footer-center">
        系统状态：<span class="status-normal">正常</span> | 时间：{{ now }}
      </div>
      <div class="footer-right">
        v1.0.0 © 2024 <a href="#" class="footer-link">帮助文档</a>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown, User, List, Setting } from '@element-plus/icons-vue'
import logoImg from '../assets/vue.svg'
import avatarImg from '../assets/vue.svg'
import TaskList from '../views/TaskList.vue'
import SmsTemplateList from '../views/SmsTemplateList.vue'

const router = useRouter()
const activeMenu = ref('')
const isCollapse = ref(false)
const search = ref('')
const now = ref('')

function handleMenuSelect(index) {
  switch (index) {
    case 'task-list':
      activeMenu.value = 'task-list'
      break
    case 'sms-template-list':
      activeMenu.value = 'sms-template-list'
      break
    default:
      activeMenu.value = index
  }
}
function goHome() {
  router.push('/home')
  activeMenu.value = ''
}
function logout() {
  router.push('/login')
}
onMounted(() => {
  setInterval(() => {
    now.value = new Date().toLocaleString()
  }, 1000)
  // 初始化菜单高亮
  if (router.currentRoute.value.query.menu === 'task-list') {
    activeMenu.value = 'task-list'
  }
})
// 路由变化时重置菜单高亮
watch(() => router.currentRoute.value.path, (path) => {
  if (path === '/home') {
    activeMenu.value = ''
  }
})
</script>

<style scoped>
.main-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(120deg, #e3e8ee 0%, #f8fafc 100%);
}
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  background: #f4f6fa;
  border-bottom: 1.5px solid #e3e8ee;
  padding: 0 32px;
  z-index: 10;
}
.header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.logo {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 8px;
}
.brand-name {
  font-size: 22px;
  font-weight: 700;
  color: #165dff;
  letter-spacing: 1px;
}
.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}
.global-search {
  width: 340px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px #e3e8ee33;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.user-avatar {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.main-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.side-menu {
  width: 200px;
  min-width: 200px;
  background: #0F172A !important;
  border-right: none;
  padding-top: 24px;
  box-shadow: 2px 0 8px 0 #e3e8ee33;
}
:deep(.el-menu-item), :deep(.el-sub-menu__title) {
  font-size: 17px;
  font-weight: 500;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: background 0.2s, color 0.2s;
}
:deep(.el-menu-item.is-active), :deep(.el-sub-menu__title.is-active) {
  background: #165DFF !important;
  color: #fff !important;
}
:deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
  background: #1e293b !important;
  color: #fff !important;
}
.main-content {
  flex: 1;
  background: #fff;
  border-radius: 18px;
  margin: 32px 32px 32px 0;
  box-shadow: 0 4px 24px 0 #e3e8ee55;
  padding: 32px 24px;
  min-width: 0;
  min-height: 600px;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px);}
  to { opacity: 1; transform: none;}
}
.main-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  background: #f4f6fa;
  border-top: 1.5px solid #e3e8ee;
  padding: 0 32px;
  font-size: 15px;
  color: #6b7280;
}
.footer-link {
  color: #165dff;
  text-decoration: none;
  margin-left: 8px;
}
.footer-link:hover {
  text-decoration: underline;
}
.status-normal {
  color: #22c55e;
  font-weight: 600;
}
@media (max-width: 900px) {
  .main-body { flex-direction: column; }
  .side-menu { width: 100% !important; min-width: unset; height: 56px; padding: 0 8px; }
  .main-content { margin: 0; border-radius: 0; padding: 12px 2px; }
}
.welcome-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #165dff;
  font-weight: 700;
  letter-spacing: 2px;
}
</style> 